<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            name: "34234234234",
            job: "2",
            sex: "女",
            msg:"",
            list:[]
        }
        render() {
            let { name, job, sex,msg} = this.state;
            return (
                <div>
                    <div>
                        {name}
                        姓名: <input type="text" value={name} onChange={(e) => {
                            // 获取最新输入框内容
                            console.log(e.target.value)
                            this.setState({
                                name: e.target.value
                            })
                        }} />
                    </div>
                    <div>
                        请选择职业： <select value={job} onChange={(e) => {
                            console.log(e)
                            this.setState({
                                job: e.target.value
                            })
                        }}>
                            <option value="1">打螺丝</option>
                            <option value="2">前端开发工程师</option>
                            <option value="3">啃老</option>
                        </select>
                    </div>
                    <div>
                        性别：<input checked={sex==='男'?true:false} value="男" type="radio" name='sex' onChange={(e) => this.changeSex(e)} /> 男
                         <input type='radio' name='sex' checked={sex==='女'?true:false} value="女" onChange={(e) => this.changeSex(e)} /> 女
                    </div>
                    <div>
                           <textarea value={msg} cols="30" rows="10" onChange={(e)=>{
                                this.setState({
                                    msg:e.target.value
                                })
                           }}></textarea>
                    </div>
                    <div>
                        爱好： <input type="checkbox" value='学习' onChange={(e)=>this.check(e)}/> 学习
                        <input type="checkbox" value="读书" onChange={(e)=>this.check(e)}/> 读书
                        <input type="checkbox"  value="蹦迪" onChange={(e)=>this.check(e)}/> 蹦迪    
                    </div>
                    <ol>
                        {
                           this.state.list.map((item,index)=>{
                            return <li key={index}>{item}</li>
                            })
                        }    
                    </ol>
                    <button onClick={() => {
                        console.log(name)
                        console.log(job)
                        console.log(sex)
                        console.log(msg)
                    }}>提交</button>
                </div>
            )
        }
        changeSex(e) {
            console.log(e.target.value)
            this.setState({
                sex: e.target.value
            })
        }
        check(e){
            console.log(e.target.value)
            let {list} = this.state;
            let index = list.findIndex((item)=>item===e.target.value);
            if(index===-1){
                list.push(e.target.value);
                this.setState({
                    list:list
                })
            }else{
                list.splice(index,1);
                this.setState({
                    list:list
                })
            }
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>